<!DOCTYPE HTML>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="我是一条老鱼">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://lexizhi.gitee.io/blog">
    <!--SEO-->

    <meta name="keywords" content="HTML">


    <meta name="description" content="本章问答
1、列表有哪些使用场合
树形可折叠菜单、购物网站的商品展示等。

2、列表分为几种类型，它们分别应用在哪些场景下
列表分为无序列表、有序列表和定义列表。

无序列表：一般用于导航、侧边...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->


<title>第二章 列表、表格和媒体元素 | 我是一条老鱼</title>


    <link rel="alternate" href="/atom.xml" title="我是一条老鱼" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.5.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

<link rel="stylesheet" href="/blog/css/prism-tomorrow.css" type="text/css"></head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header" style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)">
    <div class="main-header-box">
        <a class="header-avatar" href="/" title="LaoYu">
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                <h2> 学编程从未如此简单有趣 </h2>
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://lexizhi.gitee.io/blog">我是一条老鱼</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog"><i class="fa "></i>首页</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/h5/"><i class="fa "></i>web前端</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/后端/"><i class="fa "></i>后端</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/工具/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="第二章 列表、表格和媒体元素">
            
	            第二章 列表、表格和媒体元素
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            <a class="category-link" href="/blog/categories/web前端/">web前端</a>
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
                    <a class="tag-link" href="/blog/tags/HTML/">HTML</a>
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2019/05/31</span>
        </span>
        
            <span class="fa-wrap">
                <i class="fa fa-eye"></i>
                <span id="busuanzi_value_page_pv"></span>
            </span>
        
    
</div>
            
            
    </div>
    
    <div class="post-body post-content">
        <h2 id="本章问答"><a href="#本章问答" class="headerlink" title="本章问答"></a>本章问答</h2><blockquote>
<h3 id="1、列表有哪些使用场合"><a href="#1、列表有哪些使用场合" class="headerlink" title="1、列表有哪些使用场合"></a>1、列表有哪些使用场合</h3></blockquote>
<p>树形可折叠菜单、购物网站的商品展示等。</p>
<blockquote>
<h3 id="2、列表分为几种类型，它们分别应用在哪些场景下"><a href="#2、列表分为几种类型，它们分别应用在哪些场景下" class="headerlink" title="2、列表分为几种类型，它们分别应用在哪些场景下"></a>2、列表分为几种类型，它们分别应用在哪些场景下</h3></blockquote>
<p>列表分为无序列表、有序列表和定义列表。</p>
<ul>
<li>无序列表：一般用于导航、侧边栏新闻、有规律的图文组合模块等。</li>
<li>有序列表一般用于试卷、问卷选项等。</li>
<li>定义列表一般用于一个标题下有一个或多个列表项的情况。</li>
</ul>
<blockquote>
<h3 id="3、ul标签和li标签在使用中要遵循W3C标准的什么要求"><a href="#3、ul标签和li标签在使用中要遵循W3C标准的什么要求" class="headerlink" title="3、ul标签和li标签在使用中要遵循W3C标准的什么要求"></a>3、ul标签和li标签在使用中要遵循W3C标准的什么要求</h3></blockquote>
<p><code>&lt;ul&gt;</code>标签里面只能嵌套<code>&lt;li&gt;</code>标签，不能嵌套其他标签。<br><code>&lt;li&gt;</code>标签里面可以嵌套任意标签。</p>
<blockquote>
<h3 id="4、无序列表、有序列表和定义列表的特性分别有哪些"><a href="#4、无序列表、有序列表和定义列表的特性分别有哪些" class="headerlink" title="4、无序列表、有序列表和定义列表的特性分别有哪些"></a>4、无序列表、有序列表和定义列表的特性分别有哪些</h3></blockquote>
<h4 id="（1）无序列表的特性"><a href="#（1）无序列表的特性" class="headerlink" title="（1）无序列表的特性"></a>（1）无序列表的特性</h4><ul>
<li>没有顺序，每个<code>&lt;li&gt;</code>标签独占一行（块元素）</li>
<li>默认<code>&lt;li&gt;</code>标签项前面有个实心小圆点</li>
<li>一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等<h4 id="（2）有序列表的特性"><a href="#（2）有序列表的特性" class="headerlink" title="（2）有序列表的特性"></a>（2）有序列表的特性</h4></li>
<li>有顺序，每个<code>&lt;li&gt;</code>标签独占一行（块元素）</li>
<li>默认<code>&lt;li&gt;</code>标签项前面有顺序标记</li>
<li>一般用于排序类型的列表，如试卷、问卷选项等<h4 id="（3）定义列表的特性"><a href="#（3）定义列表的特性" class="headerlink" title="（3）定义列表的特性"></a>（3）定义列表的特性</h4></li>
<li>没有顺序，每个<code>&lt;dt&gt;</code>标签、<code>&lt;dd&gt;</code>标签独占一行（块元素）</li>
<li>默认没有标记</li>
<li>一般用于一个标题下有一个或多个列表项的情况</li>
</ul>
<blockquote>
<h3 id="5、表格的应用场景有哪些"><a href="#5、表格的应用场景有哪些" class="headerlink" title="5、表格的应用场景有哪些"></a>5、表格的应用场景有哪些</h3></blockquote>
<p>常见的应用场景有：考试成绩单、选修课课表、企业总的工资账单等。</p>
<blockquote>
<h3 id="6、描述表格的基本语法"><a href="#6、描述表格的基本语法" class="headerlink" title="6、描述表格的基本语法"></a>6、描述表格的基本语法</h3></blockquote>
<pre><code>&lt;table&gt;
    &lt;tr&gt;
         &lt;td&gt;第1个单元格的内容&lt;/td&gt;
         &lt;td&gt;第2个单元格的内容&lt;/td&gt;
        ……
    &lt;/tr&gt;
    &lt;tr&gt;
         &lt;td&gt;第1个单元格的内容&lt;/td&gt;
         &lt;td&gt;第2个单元格的内容&lt;/td&gt;
        ……
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre><blockquote>
<h3 id="7、表格如何实现跨行和跨列"><a href="#7、表格如何实现跨行和跨列" class="headerlink" title="7、表格如何实现跨行和跨列"></a>7、表格如何实现跨行和跨列</h3></blockquote>
<p>表格的跨列</p>
<pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td colspan=&quot;n&quot;&gt;单元格内容&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;单元格内容&lt;/td&gt;
     ……
  &lt;/tr&gt;
   ......
&lt;/table&gt;
</code></pre><p>表格的跨行</p>
<pre><code>&lt;table &gt;
  &lt;tr&gt;
    &lt;td rowspan=&quot;n&quot;&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre><p>表格的跨行和跨列</p>
<pre><code>……
&lt;tr&gt;
        &lt;td colspan=&quot;3&quot;&gt;学生成绩&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
        &lt;td rowspan=&quot;2&quot;&gt;张三&lt;/td&gt;
        &lt;td&gt;语文&lt;/td&gt;
        &lt;td&gt;98&lt;/td&gt;
&lt;/tr&gt;
……
</code></pre><blockquote>
<h3 id="8、描述音频和视频标签的语法"><a href="#8、描述音频和视频标签的语法" class="headerlink" title="8、描述音频和视频标签的语法"></a>8、描述音频和视频标签的语法</h3></blockquote>
<p>视频语法：</p>
<pre><code>&lt;video src=&quot;视频路径&quot;  controls&gt;&lt;/video&gt;
</code></pre><p>示例一：</p>
<pre><code>&lt;video src=&quot;video/video.mp4&quot; controls&gt;&lt;/video&gt;
</code></pre><p>示例二：</p>
<pre><code>&lt;video controls&gt;
    &lt;source src=&quot;video/video.webm&quot; type=&quot;video/webm&quot;/&gt;
    &lt;source src=&quot;video/video.mp4&quot; type=&quot;video/mp4&quot;/&gt;
&lt;/video&gt;
</code></pre><p>音频语法：</p>
<pre><code>&lt;audio src=&quot;音频路径&quot; controls&gt;&lt;/video&gt;
</code></pre><p>示例一：</p>
<pre><code>&lt;audio controls&gt;
    &lt;source src=&quot;music/music.mp3&quot; type=&quot;audio/mpeg&quot;/&gt;
    &lt;source src=&quot;music/music.ogg&quot; type=&quot;audio/ogg&quot;/&gt;
    你的浏览器不支持audio元素
&lt;/audio&gt;
</code></pre><blockquote>
<h3 id="9、为什么网页布局要先划分结构"><a href="#9、为什么网页布局要先划分结构" class="headerlink" title="9、为什么网页布局要先划分结构"></a>9、为什么网页布局要先划分结构</h3></blockquote>
<p>网页布局前要先划分结构，是为了后面更容易将一大块的内容移动到想要的位置，而不是每个元素都要分别移动。这样能提高开发效率、降低开发难度。</p>
<blockquote>
<h3 id="10、使用语义化标签布局网页结构有什么优势"><a href="#10、使用语义化标签布局网页结构有什么优势" class="headerlink" title="10、使用语义化标签布局网页结构有什么优势"></a>10、使用语义化标签布局网页结构有什么优势</h3></blockquote>
<p>语义化的结构标签不仅可以使网页结构更清晰、明确，还有利于搜索引擎的检索。</p>
<blockquote>
<h3 id="11、列举H5中常用的至少5种语义化标签，并且描述其作用"><a href="#11、列举H5中常用的至少5种语义化标签，并且描述其作用" class="headerlink" title="11、列举H5中常用的至少5种语义化标签，并且描述其作用"></a>11、列举H5中常用的至少5种语义化标签，并且描述其作用</h3></blockquote>
<table>
<thead>
<tr>
<th>元素名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>标题头部区域的内容（用于页面或页面中的一块区域）</td>
</tr>
<tr>
<td>footer</td>
<td>标记脚部区域的内容（用于整个页面或页面的一块区域）</td>
</tr>
<tr>
<td>section</td>
<td>Web页面中的一块独立区域</td>
</tr>
<tr>
<td>article</td>
<td>独立的文章内容</td>
</tr>
<tr>
<td>aside</td>
<td>相关内容或应用（常用于侧边栏）</td>
</tr>
<tr>
<td>nav</td>
<td>导航类辅助内容</td>
</tr>
</tbody>
</table>
<blockquote>
<h3 id="12、-lt-iframe-gt-内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的"><a href="#12、-lt-iframe-gt-内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的" class="headerlink" title="12、&lt;iframe&gt;内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的"></a>12、<code>&lt;iframe&gt;</code>内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的</h3></blockquote>
<pre><code>&lt;iframe src=&quot;path&quot; name=&quot;mainFrame&quot; &gt;&lt;/iframe&gt;
</code></pre><p><iframe>属性（实现页面间的相互跳转）<br>在被打开的框架上加name属性</iframe></p>
<pre><code>&lt;iframe name=&quot;mainFrame&quot; src=&quot;subframe/the_second.html&quot; /&gt;
</code></pre><p>在超链接上设置target目标窗口属性为希望显示的框架窗口名</p>
<pre><code>&lt;a href=&quot;subframe/the_second.html &quot;  target=&quot;mainFrame&quot;&gt;下边显示第二页&lt;/a&gt;
</code></pre>
    </div>
    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href target="_blank">Snippet</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/blog/2019/06/01/第三章-表单/" class="pre-post btn btn-default" title="第三章 表单">
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">第三章 表单</span>
        </a>
    
    
        <a href="/blog/2019/05/29/第一章-HTML5基础/" class="next-post btn btn-default" title="第一章  HTML5基础">
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">第一章  HTML5基础</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/blog/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
            appKey: 'erIpQac4azoCmgfBB7Dl9maa',
            placeholder: '说点什么吧',
            notify: false,
            verify: true,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: 'zh-CN'.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">文章目录</h3>
        
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#本章问答"><span class="toc-text">本章问答</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、列表有哪些使用场合"><span class="toc-text">1、列表有哪些使用场合</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、列表分为几种类型，它们分别应用在哪些场景下"><span class="toc-text">2、列表分为几种类型，它们分别应用在哪些场景下</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3、ul标签和li标签在使用中要遵循W3C标准的什么要求"><span class="toc-text">3、ul标签和li标签在使用中要遵循W3C标准的什么要求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4、无序列表、有序列表和定义列表的特性分别有哪些"><span class="toc-text">4、无序列表、有序列表和定义列表的特性分别有哪些</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#（1）无序列表的特性"><span class="toc-text">（1）无序列表的特性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#（2）有序列表的特性"><span class="toc-text">（2）有序列表的特性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#（3）定义列表的特性"><span class="toc-text">（3）定义列表的特性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5、表格的应用场景有哪些"><span class="toc-text">5、表格的应用场景有哪些</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6、描述表格的基本语法"><span class="toc-text">6、描述表格的基本语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7、表格如何实现跨行和跨列"><span class="toc-text">7、表格如何实现跨行和跨列</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8、描述音频和视频标签的语法"><span class="toc-text">8、描述音频和视频标签的语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9、为什么网页布局要先划分结构"><span class="toc-text">9、为什么网页布局要先划分结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10、使用语义化标签布局网页结构有什么优势"><span class="toc-text">10、使用语义化标签布局网页结构有什么优势</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11、列举H5中常用的至少5种语义化标签，并且描述其作用"><span class="toc-text">11、列举H5中常用的至少5种语义化标签，并且描述其作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12、-lt-iframe-gt-内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的"><span class="toc-text">12、&lt;iframe&gt;内联框架常用的属性包括哪些，它是如何实现页面之间的相互跳转的</span></a></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
        访问量:
        <strong id="busuanzi_value_site_pv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
        &nbsp; | &nbsp;
        访客数:
        <strong id="busuanzi_value_site_uv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>






    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/blog/js/app.js?rev=@@hash"></script>

</body>
</html>